<template>
    <el-tree
        ref="treeRef"
        class="filter_tree"
        :data="props.treeData"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :default-expand-all="true"
        @node-click="chooseGroup">
        <template #default="{ node }">
            <el-tooltip :content="node.label" :disabled="disabled" effect="light" placement="left">
                <span class="tooltip_label" @mouseenter="handleMouse($event)">{{ node.label }}</span>
            </el-tooltip>
        </template>
    </el-tree>
</template>

<script setup lang="ts">
import { ref, watch, reactive, computed, defineProps } from 'vue';
import { ElTree } from 'element-plus';
import { isTextBeyond } from '@/utils/utils';
const treeRef = ref<InstanceType<typeof ElTree>>();
const emit = defineEmits(['submit']);
const props = defineProps(['treeData']);
interface Tree {
    id: number;
    name: string;
    children?: Tree[];
}
// 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-朋友圈素材
const defaultProps = {
    checkStrictly: true,
    emitPath: false,
    label: 'name',
    value: 'id'
};

const disabled = ref(true);
const handleMouse = (e: any) => {
    disabled.value = isTextBeyond(e);
};

const chooseGroup = (value: any) => {
    emit('submit', value);
};
</script>

<style lang="scss" scoped>
.filter_tree {
    margin-top: 10px;

    :deep .el-tree-node__expand-icon {
        color: #ff6b00;
    }

    :deep .el-tree-node__content:hover {
        background: #fffaf9;
    }

    :deep .is-current {
    }
}

:deep(.el-tree-node__label) {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    // color: #ff6b00;
}

.left-nav {
    width: 170px;
    box-sizing: border-box;

    // height: 600px;
    background-color: #fff;
    padding: 16px;
    margin-right: 16px;

    .nav-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .nav-text {
        font-size: 16px;
        font-weight: 600;
        color: #33302d;
    }

    .el-tree-node__content {
        height: 35px !important;
        width: 170px;
    }

    .hover-text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .hover-detail {
            color: #535456;
            font-size: 14px;
        }

        .hover-detail-color {
            color: #ff6b00;
        }

        .hover-detail:hover {
            color: #ff6b00;
        }

        .hover-icon {
            transform: rotate(90deg);
        }
    }

    .search-list {
        display: flex;
        flex-direction: column;

        .search-detail {
            margin: 0;
            color: #33302d;
        }

        .search-detail:hover {
            background-color: #f5f7fa;
        }

        .hover-text {
            line-height: 35px;
        }
    }

    .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;

        .nodata-img {
            margin: 30px 0 30px 15px;
            width: 150px;
            height: 120px;
        }
    }

    .groups {
        color: #33302d;
        font-size: 14px;
        height: 550px;
        overflow: scroll;

        .search_group {
            margin: 20px 0;
        }

        :deep .el-tree-node__expand-icon {
            color: #ff6b00;
        }

        :deep .el-tree-node__content:hover {
            background: #fffaf9;
        }

        :deep .el-tree {
            --el-tree-node-hover-bg-color: #fffaf9;
        }
    }

    :deep.el-popper {
        text-align: center !important;
    }
}

.tooltip_label {
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
